import React from "react";

import { NavigationContainer } from "@react-navigation/native";
import Home from '../pages/Home';
import Detail from '../pages/Detail';
import { CardStyleInterpolators, HeaderStyleInterpolators, StackNavigationProp, createStackNavigator } from "@react-navigation/stack";

type RootStackParamList = {
  Home: undefined;
  Detail: undefined;
}

export type RootStackNavigation = StackNavigationProp<RootStackParamList>

let Stack = createStackNavigator<RootStackParamList>()
/* {
  Navigator
  Screen
} */ 
class Navigator extends React.Component {
  render () {
    const screenOptions = {
      headerTitleAlign: 'center',
      headerStyleInterpolator: HeaderStyleInterpolators.forSlideLeft,
      cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
      gestureDirection: 'horizontal',
      gestureEnabled: true,
      headerStyle: {
        ...Platform.select({
          android: {
            elevation: 0,
            borderBottomWidth: StyleSheetList.hairlineWidth, // 取消阴影效果
          }
        })
      }
    }
    const options = {
      headerTitle: '首页11'

    }

    return (
        <Stack.Navigator headerMode="float" screenOptions={screenOptions}>
          <Stack.Screen name="Home" component={Home} options={options}></Stack.Screen>
          <Stack.Screen name="Detail" component={Detail} options={{
            headerTitle: "详情页"
          }}></Stack.Screen>
        </Stack.Navigator>
    )
   
  }
}
export default Navigator